<template>
	<!-- 确认订单 -->
	<div class="orderForm">
		<div>
			<van-nav-bar fixed title="确认订单" left-text="" right-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
			<div class="order_img">
				<img src="https://image.soole.com.cn/order-img.png" alt="">
			</div>
		</div>
		
		<div class="cart_address" @click='linkAddress'>
			<!-- 有地址 -->
			<div class="cart" v-if="siteData">
				<div class="cart_inco">
					<van-icon name="location-o" />
				</div>
				<div class="cart_inif">
					<p>收货人: <span>{{siteData.name}}</span> <span>{{siteData.created_at}}</span></p>
					<p>收货地址: {{siteData.province}}{{siteData.city}}{{siteData.county}}{{siteData.detailed}}</p>
				</div>
			</div>  
			<!-- 无地址 -->
			<div class="cart_address1" v-else>
				<div>
					<p>请选择地址</p>
				</div>
				<div>
					<p>
						<van-icon name="arrow" />
					</p>
				</div>
			</div>
		</div>
		<!-- 商铺 -->
		<div class="commd_shop">
			<div class="commd_shop_inco">
				<!-- <p></p> -->
				<van-icon name="shop-o" />
			</div>
			<div class="commd_shop_name">
				<p>{{shopName}}</p>
			</div>
		</div>
		<div class="seckill_list">
			<div class="s_list_img">
				<img :src="img" alt="">
			</div>
			<div class="s_list_init">
				<div class="s_list_title van-ellipsis">
					{{comd_name}}
				</div>
				<div class="s_residue">
					{{specification}}
				</div>
				<div class="s_price_box">
					<div class="s_price">￥{{price}}</div>
				</div>
			</div>
		</div>
		<div class="commd_count">
			<div class="commd_count_text">
				购买数量:
			</div>
			<div class="commd_count_stepper">
				<van-stepper v-model="countValue" min="1" max="99" />
			</div>
		</div>
		<div class="freight_count">
			<div class="freight_count_text">
				运费
			</div>
			<div class="freight_count_stepper">
				{{!freight ? '免运费':freight}}
			</div>
		</div>

		<div class="leaveMessage_count">
			<div class="leaveMessage_text">
				备注留言:
			</div>
			<div class="leaveMessage_stepper">
				<van-cell-group>
					<van-field v-model="leaveMessage" placeholder="建议填写内容已经与商家达成一致" />
				</van-cell-group>
			</div>
		</div>

		<!-- 支付 -->
		<div class="payment">
			<div>
				<div class="payment_type">
					<div class="payment_te">
						支付方式 :
					</div>
				</div>
				
				<div class="payment_type">
					<van-radio-group v-model="radio" checked-color="red">
						<van-radio name="1">微信支付</van-radio>
					</van-radio-group>
				</div>
				<div class="payment_type">
					<div class="payment_te">
						<van-radio-group v-model="radio" checked-color="red">
							<van-radio name="2" checked='true' slotProps="icon">支付宝支付</van-radio>
						</van-radio-group>
					</div>
				</div>
			</div>
		</div>
		<van-submit-bar :price="price*countValue*100" button-text="提交订单" @submit="onSubmit" label="实付款:  " />
	</div>
</template>

<script>
	export default {
		data() {
			// let baseJs = this.$baseJs;
			return {
				onClickLeft() {
					window.history.go(-1)
				},
				onClickRight() {},
				commodityData: {}, //数据
				id:'',//商品id
				countValue: "",//数量
				specification:"",//规格
				price:"",//价格
				shopName:"",//商铺名
				img:"",//图片
				comd_name:"",//商名
				leaveMessage: "",//留言
				radio: '1', //单选
				purchaseDate: {}, //规格
				freight:'',//运费
				siteData:JSON.parse(localStorage.getItem('Address')),//地址数据
			}
		},
		created() {
			
			this.id = this.$route.query.repository_id;
			this.countValue = this.$route.query.count;
			this.specification = this.$route.query.specification;
			this.price = this.$route.query.price;
			this.shopName = this.$route.query.shop_name;
			this.img = this.$route.query.img;
			this.comd_name = this.$route.query.comd_name;
			
			this.getFreight();
			
			// this.commodityData = JSON.parse(localStorage.getItem('commdInfo') || '{}')
			// // console.log(this.$route.query.source)
			// // commodityData.price = this.$route.query.source?commodityData.price*2:commodityData.price;
			// // this.commodityData = commodityData;
			// this.purchaseDate = JSON.parse(localStorage.getItem('purchaseDate') || '{}');
			console.log(this.commodityData)
		},
		methods: {
			//跳转用户地址
			linkAddress(){
			  this.$router.push({path: '/Address'})
			},
			//运费
			async getFreight(){
			  let this_ = this;
			  let Id= this.$route.query.id;
			  console.log(Id)
			  let shop_id=this.$route.query.shop_id;
			   let params = {
			     productId:Id,
			     enterpriseId:shop_id,//商铺id
			     buyNum:this_.countValue,//数量
			     address:this_.siteData.province,
			   };
			   const res = await this.$axios.post(this.$api.getpriceData, params);
			   if (res.success) {
			    this.freight = parseInt(res.data);
			    console.log("运费",this.freight)
			    console.log(typeof this.freight)
			  } else {
			     this.$toast(res.msg);
			   }
			},
			// 提交订单
			onSubmit(){
			  console.log(this.siteData)
			  if(this.siteData){
				this.SubmitOrder()
			  }else {
			    this.$toast("请添加地址");
			  }
			},
			async SubmitOrder() {
			  let this_ = this;
			  if(this_.radio==='2'){
			  	this.$toast("为开通支付")
				return;
			  }
			  var userList = [];
			  var userList = JSON.parse(localStorage.getItem('userInfo'));
			  this.userList = userList;
			  var userID = userList.userId;
			  var openID = userList.openId;
			  let params = {
			    buyerMessage: this_.leaveMessage,//留言
			    shippingAddressId:this_.siteData.id,//地址id
			    spellGroupType: 16,//订单类型 16匀贸商城
				paymentChannel: this_.radio,//支付渠道
			    quantity: this_.countValue,//数量
			    openId: openID,
			    repositoryId: this_.id,
			    gwj:0,
			  };
			  // var apiUrl=this.$api.payData;
			  // if(this.type!="1"){
			  //     apiUrl=this.$api.payNewData;
			  //     params.paymentChannel=radio;//支付渠道
			  // }
			
			  const res = await this.$axios.post(this.$api.payNewData, params);
			  if (res.success) {
			    var json = res.data.order_num
			    console.log('zf', json)
			    console.log(res)
			    this.$router.push({path: '/wxPay',query:{order_id:json}})
			
			    // this.$ajax({
			    //   method:"post",
			    //   url: '/api/common/v1/order/purchase-immediately',
			    //   data:{
			    //     buyerMessage:this_.Remarks,//备注
			    //     shippingAddressId:addressData.id,//地址id
			    //     spellGroupType: 1,//价格
			    //     quantity:this_.buymin,//数量
			    //     openId:openID,
			    //     repositoryId:this_.id,
			    //   },
			    //   transformRequest: [function (data) {
			    //     let ret = ''
			    //     for (let it in data) {
			    //       ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
			    //     }
			    //     return ret
			    //   }],
			    //   headers: {
			    //     'Content-Type':'application/x-www-form-urlencoded',
			    //     'Authorization': 'Bearer '+getCookie("token")
			    //   }
			    // }).then(res=>{
			    //   var json = res.data.data
			    //   if(res.data.success){
			    //     function onBridgeReady(){
			    //       WeixinJSBridge.invoke(
			    //         'getBrandWCPayRequest', {
			    //           "appId":json.appId,     //公众号名称，由商户传入
			    //           "timeStamp":json.timeStamp,  //时间戳，自1970年以来的秒数
			    //           "nonceStr":json.nonceStr, //随机串
			    //           "package":json.package,
			    //           "signType":"MD5",         //微信签名方式：
			    //           "paySign":json.paySign //微信签名
			    //         },
			    //         function(res){
			    //           if(res.err_msg == "get_brand_wcpay_request:ok" ){
			    //             //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
			    //             window.location.href='http://pay.zjc158.com/stcwx/#/User'
			    //             // this.$router.push({path: '/AllOrders'})
			    //           }
			    //         });
			    //     }
			    //     if (typeof WeixinJSBridge == "undefined"){
			    //       if( document.addEventListener ){
			    //         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
			    //       }else if (document.attachEvent){
			    //         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
			    //         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
			    //       }
			    //     }else {
			    //       onBridgeReady();
			    //     }
			
			  } else {
			    this.$toast(res.msg);
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_img {
		background-color: #fff;
		position: fixed;
		height: 0px;
		img {
			width: 100%;
		}
	}
	
	
	[class*=van-hairline]::after{
		border: none;
	}
	
	.orderForm {
		margin-top: 46px;
		margin-bottom: 70px;
		.van-nav-bar{
			background: #fff;
			.van-nav-bar__title{
				color:#333333;
			}
			.van-icon{
				color:#333333;
			}
		}
	}

	.commd_shop,
	.cart_address,
	.seckill_list,
	.commd_count,
	.freight_count,
	.leaveMessage_count {
		padding: 0px 12px;
	}

	// 收货
	.cart_address {
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 5px;
		padding-top: 13px;
		padding-bottom: 6px;
		.cart_address1 {
			background-color: #fff;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			font-size: 15px;
		}
	}

	//有地址
	.cart {
		display: flex;
		align-items: center;
		font-size: 14px;

		.cart_inco {
			font-size: 20px;
			color: #000000;
			margin-right: 6px;
		}

		.cart_inif {
			text-align: left;
		}

		p {
			margin: 14px 0;
		}

	}




	//商铺
	.commd_shop {
		background-color: white;
		display: flex;
		align-items: center;
		margin-bottom: 1px;
		line-height: 37px;

		.commd_shop_inco {
			font-size: 20px;
			color: #000000;

			display: contents;
		}

		.commd_shop_name {
			font-size: 14px;
			margin-left: 6px;
			vertical-align: baseline;
		}
	}

	// 商品信息
	.seckill_list {
		width: 100%;
		background-color: white;
		display: flex;
		box-sizing: border-box;
		position: relative;
		padding-top: 12px;
		padding-bottom: 10px;

		.s_list_img {
			width: 25%;
			box-sizing: border-box;

			img {
				width: 100%;
			}
		}

		.s_list_init {
			width: 75%;
			margin-top: 10px;
			padding-left: 6px;

			.s_price_box {
				color: rgb(236, 53, 35);
				text-align: left;

				.s_price {
					font-size: 18px;
					margin-right: 5px;
				}
			}

			.s_residue {
				color: #6F6F6F;
				text-align: left;
				font-size: 12px;
				line-height: 20px;
				padding-left: 5px;
			}

			/* 文字 */
			.s_list_title {
				color: #323233;
				font-size: 14px;
				line-height: 26px;
				padding-left: 5px;
			}
		}
	}

	//数量
	.commd_count {
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom: 10px;

		.commd_count_text {
			font-size: 14px;
			color: #343434;

		}
	}

	//运费
	.freight_count {
		justify-content: space-between;
		margin-top: 10px;
		padding-top: 10px;
		padding-bottom: 10px;

		.freight_count_text {
			font-size: 14px;
			color: #9C9C9C;
		}

		.freight_count_stepper {
			font-weight: 600;
			font-size: 14px;
			color: #FF1B28;
		}
	}

	.freight_count,
	.leaveMessage_count,
	.payment_type {
		display: flex;
		align-items: center;
		background-color: #fff;
	}

	//留言
	.leaveMessage_count {
		align-content: flex-start;
		color: #9C9C9C;
		text-align: left;
		border-top: 1px solid #F2F2F2;
		margin-bottom: 10px;

		.leaveMessage_text {
			font-size: 14px;
			width: 16%;
		}

		.leaveMessage_stepper {
			width: 84%;
			font-size: 14px;

		}
	}

	//支付
	.payment_type {
		margin-top: 1px;
		padding: 10px 12px;
		display: block;

		.van-radio {
			height: 43px;
		}

		.payment_te {
			text-align: left;
		}
	}

	// 提交
	.van-submit-bar__text {
		text-align: center;
	}

	.van-submit-bar__price {
		display: inline;
	}
</style>
